<template>
  <div class="login-body">
    <div id="bg_overlay" v-if="showlogin || showregister || forgetpwd" style="display: block;" class="bg_overlay"></div>
    <div class="login-content-box" v-if="showlogin">
      <div class="title clearfix">
        <div class="title_con">登录</div>
        <div class="close" @click="lgwdscancer"></div>
      </div>
      <div class="content">
        <div class="input_row">
          <input type="text" v-model="loginform.email" placeholder="邮箱/用户名" tabindex="1">
        </div>
        <div class="input_row">
          <input type="password" v-model="loginform.password" placeholder="请输入密码" tabindex="2" onblur="">
        </div>
        <div class="input_row clearfix">
          <input type="text" class="input_half" v-model="loginform.verifycode" id="lg_wds_dynCode" placeholder="请输入图片中的字符" tabindex="3">
          <a href="javascript:void(0)">
            <div class="dyncode" @click="getcaptchakey"><img :src="verifycodeurl" height="32" id="annexCode2">
            </div>
          </a>
        </div>
        <div class="new_lg_btns clearfix">
          <div class="remeber btn">
            <el-checkbox v-model="loginform.is_remember">记住我</el-checkbox>
          </div>
          <div class="regist btn" @click="registerwdsshow">注册</div>
          <div class="forget btn" @click="forgetpwdshow">忘记密码？</div>
        </div>
        <div class="msgcontent">
          {{msgtext.msg}}
        </div>
        <div class="new_lg_ts" id="login_msg"></div>
        <div class="new_lg_bt" @click="login2">登录</div>
      </div>
    </div>
    <div class="login-content-box" v-else-if="showregister">
      <div class="title clearfix">
        <div class="title_con">注册</div>
        <div class="close" @click="lgwdscancer()"></div>
      </div>
      <div class="content">
        <div class="input_row">
          <input type="text" v-model="registerform.nickname" placeholder="用户名" tabindex="1">
        </div>
        <div class="input_row">
          <input type="text" v-model="registerform.email" placeholder="邮箱" tabindex="2">
        </div>
        <div class="input_row">
          <input type="password" v-model="registerform.password" placeholder="请输入密码" tabindex="3" onblur="">
        </div>
        <div class="input_row">
          <input type="password" v-model="registerform.repassword" placeholder="请确认密码" tabindex="4" onblur="">
        </div>
        <div class="input_row">
          <el-date-picker
            v-model="registerform.birthday"
            type="date"
            placeholder="选择生日">
          </el-date-picker>
        </div>
        <div class="input_row clearfix">
          <input type="text" class="input_half" v-model="registerform.verifycode" placeholder="请输入图片中的字符" tabindex="5">
          <a href="javascript:void(0)">
            <div class="dyncode" @click="getcaptchakey"><img :src="verifycodeurl" height="32" id="annexCode2">
            </div>
          </a>
        </div>
        <!-- <div class="input_row clearfix">
          <input type="text" class="input_half" v-model="email" placeholder="邮箱" tabindex="1">
          <div class="getdyncode" id="registerdyn" @click="getRegisterCode()">  获取验证码</div>
        </div> -->
       <!--  <div class="input_row">
          <input type="password" v-model="dyncode" placeholder="请输入验证码" tabindex="2" onblur="">
        </div> -->
        <div class="new_lg_btns">已有账户，马上<span @click="lgwdsshow()">登录</span></div>
        <div class="msgcontent">
          {{msgtext.msg}}
        </div>
        <div class="new_lg_ts" id="login_msg"></div>
        <div class="new_lg_bt" @click="Register">注册</div>
      </div>
    </div>
    <div class="login-content-box" v-else-if="forgetpwd">
      <div class="title clearfix">
        <div class="title_con">修改密码</div>
        <div class="close" @click="lgwdscancer()"></div>
      </div>
      <div class="content">
        <!-- <div class="input_row clearfix">
          <input type="text" class="input_half" id="lg_wds_dynCode" placeholder="请输入图片中的字符" tabindex="3">
          <a href="javascript:void(0)">
            <div class="dyncode"><img src="../../img/mobile/testcode.jpeg" height="32" id="annexCode2">
            </div>
          </a>
        </div> -->
        <div class="input_row clearfix">
          <input type="text" class="input_half" v-model="forgetform.email" placeholder="请输入注册的邮箱" tabindex="1">
          <!-- <div class="getdyncode" id="registerdyn" @click="getRegisterCode()">  获取验证码</div> -->
        </div>
        <!-- <div class="input_row">
          <input type="password" v-model="dyncode" placeholder="请输入验证码" tabindex="2" onblur="">
        </div> -->
        <div class="new_lg_btns" v-if="otherbox">已有账户，马上<span @click="lgwdsshow()">登录</span></div>
        <div class="msgcontent">
          {{msgtext.msg}}
        </div>
        <div class="new_lg_ts" id="login_msg"></div>
        <div class="new_lg_bt" @click="submitPwd">提交</div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { Indicator, Lazyload, MessageBox } from 'mint-ui'
  import errcode from '../../../utils/errorcode.js'
  import api from '../../../utils/api'
  import apiConfig from '../../../utils/apiconfig.js'
  import helper from '../../../utils/helper'
  export default {
    props: ['registershow', 'forgetpwd'],
    data () {
      return {
        user_name: '',
        msgtext: {},
        registerform: {
          nickname: '',
          verifycode: '',
          email: '',
          password: '',
          repassword: '',
          birthday: '',
          captchakey: ''
        },
        loginform: {
          email: '',
          password: '',
          is_remember: 0
        },
        forgetform: {
          email: ''
        },
        logining: false,
        remeberme: true,
        showlogin: true,
        showregister: false,
        forgetpwd: false,
        verifycodeurl: '',
        otherbox: true
      }
    },
    created () {
      console.log(this.registershow)
      if (this.registershow) {
        this.showlogin = false
        this.showregister = true
        this.forgetpwd = false
        this.msgtext.msg = ''
        this.getcaptchakey()
      }
      if (this.forgetpwd) {
        this.showlogin = false
        this.showregister = false
        this.forgetpwd = true
        this.msgtext.msg = ''
        this.otherbox = false
        this.getcaptchakey()
      }
      console.log('lo')
      // this.verifycodeurl = localStorage.codeurl
      console.log(this.verifycodeurl)
      this.getcaptchakey()
      // this.loginsure()
    },
    methods: {
      loginsure () {
        var that = this
        var param = {
          token: 'login'
        }
        Indicator.open('加载中...')
        api.GET(helper.getClientApiUrl(apiConfig.web.loginsure), param, res => {
          that.logining = true
        }, res => {
          console.log(res)
        })
      },
      getcaptchakey () {
        var that = this
        var param = {
          type: 'captcha'
        }
        api.GET(helper.getClientApiUrl(apiConfig.web.captchakey), param, res => {
          that.captchakey = res.captcha_key
          that.verifycodeurl = res.url
          console.log(that.verifycodeurl)
          // localStorage.setItem('captchakey', res.captcha_key)
          // localStorage.setItem('codeurl', res.url)
          that.registerform.captchakey = res.captcha_key
          that.loginform.captchakey = res.captcha_key
          console.log(res.url)
        }, res => {
          console.log(res)
        })
      },
      submitPwd () {
        var that = this
        var forgetform = that.forgetform
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (forgetform.email === '') {
          MessageBox('提交失败', '邮箱不能为空')
          return false
        }
        if (!myreg.test(forgetform.email)) {
          MessageBox('提交失败', '请填写正确邮箱格式')
          return false
        }
        var param = {
          email: forgetform.email
        }
        console.log(param)
        Indicator.open('加载中...')
        api.GET(helper.getClientApiUrl(apiConfig.web.forgeturl), param, res => {
          that.logining = true
          MessageBox('提交成功', '请登录邮箱修改密码')
          this.$emit('bindlogin', false)
          Indicator.close()
          // this.$router.push('/home/validate?action=reset_pwd')
        }, res => {
          Indicator.close()
          that.msgtext = errcode.showCode(res.errcode)
          // MessageBox('失败', res.msg)
        })
      },
      login2 () {
        var that = this
        var loginform = that.loginform
        // var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (loginform.email === '') {
          MessageBox('登录失败', '邮箱不能为空')
          return false
        } else if (loginform.password === '') {
          MessageBox('登录失败', '请输入密码')
          return false
        }
        // if (!myreg.test(loginform.email)) {
        //   MessageBox('登录失败', '请填写正确邮箱格式')
        //   return false
        // }
        if (loginform.password.length < 6) {
          MessageBox('登录失败', '密码请多于六个字符')
          return false
        }
        if (that.loginform.is_remember) {
          that.loginform.is_remember = 1
        } else {
          that.loginform.is_remember = 0
        }
        var param = {
          email: loginform.email,
          passwd: loginform.password,
          is_remember: loginform.is_remember,
          verify_code: loginform.verifycode,
          captcha_key: loginform.captchakey
        }
        console.log(param)
        Indicator.open('加载中...')
        api.GET(helper.getClientApiUrl(apiConfig.web.loginurl), param, res => {
          this.$emit('bindlogin', false)
          localStorage.setItem('token', res.token)
          localStorage.setItem('nickname', res.user_name)
          this.user_name = res.user_name
          this.$emit('nickname', res.user_name)
          Indicator.close()
          window.location.reload()
        }, res => {
          that.getcaptchakey()
          that.msgtext = errcode.showCode(res.errcode)
          Indicator.close()
        })
      },
      Register () {
        var that = this
        var registerform = that.registerform
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (registerform.birthday) {
          registerform.birthday = helper.formatDate(registerform.birthday)
        }
        console.log(registerform.birthday)
        if (registerform.nickname === '') {
          MessageBox('注册失败', '用户名不能为空')
          return false
        } else if (registerform.email === '') {
          MessageBox('注册失败', '邮箱不能为空')
          return false
        } else if (registerform.password === '') {
          MessageBox('注册失败', '请输入密码')
          return false
        } else if (registerform.repassword === '') {
          MessageBox('注册失败', '请确认密码')
          return false
        } else if (registerform.birthday === '') {
          MessageBox('注册失败', '生日不能为空')
          return false
        } else if (registerform.verifycode === '') {
          MessageBox('注册失败', '请填写验证码')
          return false
        }
        if (!myreg.test(registerform.email)) {
          MessageBox('注册失败', '请填写正确邮箱格式')
          return false
        }
        if (registerform.password.length < 6) {
          MessageBox('注册失败', '密码请多于六个字符')
          return false
        }
        if (registerform.password !== registerform.repassword) {
          MessageBox('注册失败', '密码和确认密码请保持一致')
          return false
        }
        var param = {
          user_name: registerform.nickname,
          email: registerform.email,
          passwd: registerform.password,
          repass: registerform.repassword,
          birthday: registerform.birthday,
          verify_code: registerform.verifycode,
          use_verify: 1,
          captcha_key: registerform.captchakey
        }
        var param1 = {
          user_name: registerform.nickname,
          email: registerform.email,
          passwd: registerform.password,
          repass: registerform.repassword,
          birthday: registerform.birthday,
          verify_code: registerform.verifycode,
          use_verify: 0,
          captcha_key: registerform.captchakey
        }
        console.log(param)
        console.log(param1)
        Indicator.open('加载中...')
        api.GET(helper.getClientApiUrl(apiConfig.web.register), param, res => {
          this.$emit('bindlogin', false)
          MessageBox('注册成功', '请到您注册的邮箱内,点击激活链接以完成注册！')
          Indicator.close()
          api.GET(helper.getClientApiUrl(apiConfig.web.register), param1, res => {
          }, res => {
          }, true)
          // this.$router.push('/home/validate?action=register')
        }, res => {
          that.msgtext = errcode.showCode(res.errcode)
          Indicator.close()
        }, false)
      },
      lgwdsshow () {
        this.showlogin = true
        this.showregister = false
        this.registershow = false
        this.forgetpwd = false
        this.forgetpwd = false
        this.getcaptchakey()
        this.msgtext.msg = ''
      },
      registerwdsshow () {
        this.showlogin = false
        this.showregister = true
        this.forgetpwd = false
        this.msgtext.msg = ''
        // if (localStorage.captchakey) {
        //   this.registerform.captchakey = localStorage.captchakey
        // } else {
        this.getcaptchakey()
        // }
      },
      forgetpwdshow () {
        this.forgetpwd = true
        this.showlogin = false
        this.registershow = false
        this.showregister = false
        this.msgtext.msg = ''
      },
      lgwdscancer () {
        this.registershow = false
        this.showregister = false
        this.showlogin = true
        this.forgetpwd = false
        this.$emit('bindlogin', false)
        // this.forgetpwd = false
        // this.showlogin = false
        // this.showregister = false
      }
    }
  }
</script>